<template>
    <div class="accountSetting-wrapper">
        <IHeader class="header" back="true" title="个人信息"></IHeader>
        <scroller class="itemList" show-scrollbar="false" v-if="userData">
            <div class="itemCell flex_row border-bottom-cecece" @click="handleAvatarDialog">
                <text class="itemName col_868686">我的头像</text>
                <div class="align_center flex_row">
                    <image class="avatar" :src="userData.headPortraitUrl ? userData.headPortraitUrl : imgPath('default_avatar.png')"></image>
                    <image class="arrow_right" :src="imgPath('arrow_right.png')"></image>
                </div>
            </div>
            <div class="itemCell item_height flex_row border-bottom-cecece" @click="handleModifyName">
                <text class="itemName col_868686">我的昵称</text>
                <div class="align_center flex_row">
                    <text class="col_464646 itemName">{{userData.nickname}}</text>
                    <image class="arrow_right" :src="imgPath('arrow_right.png')"></image>
                </div>
            </div>
            <div class="itemCell item_height flex_row border-bottom-cecece" @click="handleSelectArea">
                <text class="itemName col_868686">所在地区</text>
                <div class="align_center flex_row">
                    <text class="col_464646 itemName">{{userData.area}}</text>
                    <image class="arrow_right" :src="imgPath('arrow_right.png')"></image>
                </div>
            </div>
            <div class="itemCell item_height flex_row border-bottom-cecece" @click="handleSelectSex">
                <text class="itemName col_868686">我的性别</text>
                <div class="align_center flex_row">
                    <text class="col_464646 itemName">{{userData.sex ? sexList[userData.sex - 1] : '未知'}}</text>
                    <image class="arrow_right" :src="imgPath('arrow_right.png')"></image>
                </div>
            </div>
        </scroller>
        <!--头像选择弹窗-->
        <Dialog :show="avatarDialogShow" @close="hideAvatarDialog">
            <text class="title fs_28 col_464646">修改头像</text>
            <div class="upload-wrapper flex_row">
                <text class="upload fs_28" @click="uploadAvatar">上传本地图片</text>
            </div>
        </Dialog>
        <!--昵称选择弹窗-->
        <wxc-popup popup-color="#fff" :show="nameDialogShow" pos="right">
            <div class="dialog-content">
                <IHeader class="header" back="true" close="true" title="修改昵称" @closeDialog="hideNameDialog"></IHeader>
                <div class="modify-content flex_row">
                    <input v-model="userData.nickname" class="userName" type="text" placeholder="请输入您的昵称">
                    <text class="sure-btn" @click="handleSubmitName">确定</text>
                </div>
            </div>
        </wxc-popup>
        <!--性别选择弹窗-->
        <wxc-popup popup-color="#fff" :show="sexDialogShow" pos="right">
            <div class="dialog-content">
                <IHeader class="header" back="true" close="true" title="修改性别" @closeDialog="hideSexDialog"></IHeader>
                <list class="enterprise-list">
                    <cell class="enterprise-item" @click="chooseThisSex(index)" v-for="(item, index) in sexList" :key="index">
                        <text class="fs_28 item-height col_464646" :class="[(index === sexList.length - 1) ? '' : 'border-bottom-cecece']">{{item}}</text>
                    </cell>
                </list>
            </div>
        </wxc-popup>
        <!--地区选择-->
        <Address :show="areaDialogShow" @cancel="hideAreaDialog" @confirm="getAreaData"></Address>
        <!--loading-->
        <wxc-loading :show="loadingShow" :need-mask="needMask"></wxc-loading>
    </div>
</template>

<script>
import IHeader from '@/components/header'
import Address from '@/components/address'
import Dialog from '@/components/dialog'
import { WxcPopup, WxcLoading } from 'weex-ui'
import { validateUserName } from '@/util/validate'
import { userInformation, modifyInformation } from '@/api/user'
import { fileUpload } from '@/api/common'
import Nat from 'natjs'
const modal = weex.requireModule('modal')
export default {
  name: 'personalInfo',
  data () {
    return {
      needMask: true, // 显示蒙版
      loadingShow: true, // loading
      userData: {}, // 用户信息
      modifyName: '', // 修改的昵称
      avatarDialogShow: false, // 头像显示
      nameDialogShow: false, // 昵称修改
      sexDialogShow: false, // 性别选择
      sexList: ['男', '女'], // 性别
      areaDialogShow: false // 地区显示
    }
  },
  mounted () {
    this.getUserInfo()
  },
  methods: {
    getUserInfo () {
      const that = this
      that.$api.get(userInformation, {}, (res) => {
        that.loadingShow = false
        let data = res.data
        that.userData = {
          nickname: data.nickname,
          headPortraitUrl: data.headPortraitUrl,
          sex: data.sex,
          area: data.area,
          provinceId: data.provinceId,
          cityId: data.cityId,
          districtId: data.districtId
        }
      }, () => {
        that.loadingShow = false
      }, true)
    },
    handleAvatarDialog () { // 头像选择显示
      this.avatarDialogShow = true
    },
    hideAvatarDialog () { // 头像选择隐藏
      this.avatarDialogShow = false
    },
    uploadAvatar () { // 头像上传
      const that = this
      Nat.image.pick({
        showCamera: true
      }, (err, ret) => {
        if (err) {
          modal.toast({
            message: '[ERROR] ' + JSON.stringify(err)
          })
          return
        }
        that.loadingShow = true
        let path = ret.paths[0]
        Nat.upload(that.$api.url + fileUpload, {
          path: path
        }, (errs, res) => {
          if (errs) {
            modal.toast({
              message: '[ERROR] ' + JSON.stringify(errs)
            })
            return
          }
          if (res.ok) {
            let result = JSON.parse(res.data)
            that.userData.headPortraitUrl = result.data
            that.loadingShow = true
            that.$api.post(modifyInformation, that.userData, () => {
              that.avatarDialogShow = false
              that.loadingShow = false
            }, () => {
              that.loadingShow = false
            }, true)
          }
        })
        that.loadingShow = false
      })
    },
    handleModifyName () { // 修改昵称
      this.nameDialogShow = true
    },
    hideNameDialog () { // 隐藏昵称弹窗
      this.nameDialogShow = false
    },
    handleSubmitName () { // 昵称确定
      const that = this
      if (validateUserName(that.userData.nickname)) {
        that.loadingShow = true
        that.$api.post(modifyInformation, that.userData, () => {
          that.nameDialogShow = false
          that.loadingShow = false
        }, () => {
          that.loadingShow = false
        }, true)
      } else {
        modal.toast({
          message: '昵称格式有误'
        })
        that.getUserInfo()
      }
    },
    handleSelectSex () { // 修改性别
      this.sexDialogShow = true
    },
    hideSexDialog () { // 隐藏性别弹窗
      this.sexDialogShow = false
    },
    chooseThisSex (inx) { // 性别选择
      const that = this
      that.userData.sex = inx + 1
      that.loadingShow = false
      that.$api.post(modifyInformation, that.userData, () => {
        that.sexDialogShow = false
        that.loadingShow = false
      }, () => {
        that.loadingShow = false
      }, true)
    },
    handleSelectArea () { // 选择地区
      this.areaDialogShow = true
    },
    hideAreaDialog () { // 隐藏地区
      this.areaDialogShow = false
    },
    getAreaData (obj) { // 确定
      const that = this
      that.userData.area = obj.str
      let ids = obj.val.split(' ')
      that.userData.provinceId = ids[0]
      that.userData.cityId = ids[1]
      that.userData.districtId = ids[2]
      that.loadingShow = false
      that.$api.post(modifyInformation, that.userData, () => {
        that.areaDialogShow = false
        that.loadingShow = false
      }, () => {
        that.loadingShow = false
      }, true)
    }
  },
  components: {
    IHeader,
    WxcPopup,
    WxcLoading,
    Dialog,
    Address
  }
}
</script>

<style scoped>
    .flex_row {
        flex-direction: row;
    }
    .align_center {
        align-items: center;
    }
    .col_464646 {
        color: #464646;
    }
    .col_868686 {
        color: #868686;
    }
    .fs_28 {
        font-size: 28px;
    }
    .item-height {
        height: 88px;
        line-height: 88px;
    }
    .border-bottom-cecece {
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #cecece;
    }
    .item_height {
        height: 112px;
    }
    .accountSetting-wrapper {
        background-color: #f5f5f5;
    }
    .itemList {
        margin-top: 88px;
        background-color: #f5f5f5;
    }
    .itemCell {
        padding-left: 24px;
        padding-right: 24px;
        padding-top: 16px;
        padding-bottom: 16px;
        align-items: center;
        justify-content: space-between;
        background-color: #fff;
    }
    .avatar {
        width: 88px;
        height: 88px;
        border-radius: 44px;
    }
    /*.user {*/
        /*align-items: center;*/
    /*}*/
    .itemName {
        font-size: 28px;
    }
    .arrow_right {
        width: 24px;
        height: 36px;
        margin-left: 24px;
    }
    .modify-content {
        margin-top: 88px;
        padding-left: 24px;
        padding-right: 24px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .enterprise-list {
        margin-top: 88px;
        min-height: 700px;
    }
    .userName {
        width: 702px;
        height: 88px;
        margin-top: 32px;
        padding-left: 24px;
        padding-right: 24px;
        border-width: 1px;
        border-style: solid;
        border-color: #ebebeb;
        font-size: 30px;
        color: #464646;
        placeholder-color: #cecece;
        border-radius: 10px;
    }
    .sure-btn {
        width: 606px;
        height: 80px;
        margin-top: 100px;
        line-height: 80px;
        font-size: 30px;
        color: #fff;
        text-align: center;
        border-radius: 10px;
        background-image: linear-gradient(to right, #2b3040, #7d88a4);
    }
    .enterprise-item {
        padding-left: 24px;
        padding-right: 24px;
    }
    .title {
        text-align: center;
    }
    .upload-wrapper {
        margin-top: 72px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .upload {
        width: 276px;
        height: 50px;
        color: #fff;
        line-height: 50px;
        text-align: center;
        background-color: #2b3040;
        border-radius: 10px;
    }
</style>
